<template>
  <div id="home">
    <!-- carousel -->
    <div class="carousel h-top">
      <TCarousel
        :autoPlay="true"
        :duration="3000"
        dotBgColor="#e91e63"
        @UpdateIdx="UpdateIdx"
        v-if="CarData.length > 0"
      >
        <template v-slot:nextButton>
          <a href="javascript:;">
            <img
              :src="
                require(`@/assets/images/components/Carousel/btn-right.png`)
              "
            />
          </a>
        </template>
        <template v-slot:prevButton>
          <a href="javascript:;">
            <img
              :src="require(`@/assets/images/components/Carousel/btn-left.png`)"
            />
          </a>
        </template>
        <template v-slot:CarItem>
          <div class="container">
            <t-car-item
              v-for="(item, index) of CarData"
              :key="index"
              :itemLen="CarData.length"
              :current="CalCur"
            >
              <a href="javascript:;">
                <img :src="item.imgsrc" />
              </a>
            </t-car-item>
          </div>
        </template>
      </TCarousel>
      <!-- <Carousel :autoPlay="true" :duration="3000" dotBgColor="#e91e63">
        <template v-slot:nextButton>
          <a href="javascript:;">
            <img src="@/assets/images/components/Carousel/btn-right.png" />
          </a>
        </template>
        <template v-slot:prevButton>
          <a href="javascript:;">
            <img src="@/assets/images/components/Carousel/btn-left.png" />
          </a>
        </template>
        <template v-slot:CarItem>
          <div class="container">
            <car-item v-for="(item,index) of CarData" :key="index">
              <a href="javascript:;">
                <img :src="require(`@/assets/images/home/${item.imgsrc}`)" :alt="item.alt" />
              </a>
            </car-item>
          </div>
        </template>
      </Carousel>-->
    </div>
    <div class="section">
      <div class="data-tagsBox h-top">
        <a
          class="tags-item"
          v-for="(item, index) of tagsBox"
          :key="index"
          :href="item.href"
        >
          <ImgLazy :url="require(`@/assets/images/home/${item.imgsrc}`)" />
        </a>
      </div>
    </div>
    <!-- 歌单推荐 -->
    <div class="section">
      <div class="container">
        <SectionHead :href="'/v1/playlist'" :icon="'jiantouyou'">
          <template v-slot:title>歌单推荐</template>
        </SectionHead>
        <div class="play-list">
          <PlayListRecom :data="PlayListData"></PlayListRecom>
        </div>
      </div>
    </div>
    <!-- 新歌速递 -->
    <div class="section">
      <div class="container">
        <SectionHead :href="'javascript:;'" :icon="'jiantouyou'">
          <template v-slot:title>新歌速递</template>
        </SectionHead>
        <div class="wrapper-items">
          <NewSong :data="NewSongData" />
        </div>
      </div>
    </div>

    <!-- 新歌速递 -->
    <!-- <div class="section">
      <Songs></Songs>
    </div> -->
    <!-- 新碟上架 -->
    <!-- <div class="section">
      <div class="container">
        <SectionHead :href="'javascript:;'" :icon="'jiantouyou'">
          <template v-slot:title>新碟上架</template>
        </SectionHead>
        <div class="wrapper-items">
          <Album></Album>
        </div>
      </div>
    </div> -->
    <!-- 数字专辑 -->
    <!-- <div class="section">
      <div class="container">
        <SectionHead :href="'javascript:;'" :icon="'jiantouyou'">
          <template v-slot:title>数字专辑</template>
        </SectionHead>
        <div class="wrapper-items">
          <DigitalAlbum></DigitalAlbum>
        </div>
      </div>
    </div> -->
    <!-- 排行榜 -->
    <!-- <div class="section">
      <div class="container">
        <SectionHead :href="'javascript:;'" :icon="'jiantouyou'">
          <template v-slot:title>排行榜</template>
        </SectionHead>
      </div>
      <Billboard></Billboard>
    </div> -->
    <!-- 音乐人 -->
    <div class="section">
      <div class="container">
        <SectionHead :href="'javascript:;'" :icon="'jiantouyou'">
          <template v-slot:title>音乐人</template>
        </SectionHead>
      </div>
      <Musician :data="MusicianData"></Musician>
    </div>
  </div>
</template>
<script>
// import CarData from "@/data/home/carousel.js";
import tagsBox from "@/configs/home/tagsbox.js";

import PlayListRecom from "@/components/Home/PlayListRecom/index";
import Songs from "@/components/Home/Songs/index";
import Album from "@/components/Home/Album/index";
import DigitalAlbum from "@/components/Home/DigitalAlbum/index";
import Billboard from "@/components/Home/Billboard/index";
import Musician from "@/components/Home/Musician/index";
import NewSong from "@/components/Home/NewSong/index";

import { onBeforeMount, reactive, toRefs } from "vue";
import Service from "@/services";
import { host } from "@/configs/config";
export default {
  name: "Home",
  components: {
    PlayListRecom,
    Songs,
    Album,
    DigitalAlbum,
    Billboard,
    Musician,
    NewSong,
  },
  setup() {
    const service = new Service();
    const state = reactive({
      CalCur: {
        index: 0,
        dir: "next",
      },
      CarData: [],
      PlayListData: [],
      MusicianData: [],
      NewSongData: [],
    });

    const UpdateIdx = (obj) => {
      state.CalCur.index = obj.index;
      state.CalCur.dir = obj.dir;
    };

    onBeforeMount(() => {
      getCarouselData();
      getPlayListData();
      getMusicanData();
      getNewSongData();
    });

    const getNewSongData = async () => {
      let result = await service.findmusicRand({
        limit: 10,
      });
      let newArr = [];
      result.map((item) => {
        newArr.push({
          ...item,
          imgsrc: `${host + item.music_cover_src + item.music_cover_name}`,
        });
      });
      state.NewSongData = newArr;
    };

    const getMusicanData = async () => {
      let result = await service.findMusicByNames({
        name: "周杰伦",
      });
      let newArr = [];
      result.map((item) => {
        newArr.push({
          ...item,
          imgsrc: `${host + item.music_cover_src + item.music_cover_name}`,
        });
      });
      state.MusicianData = newArr;
    };

    const getPlayListData = async () => {
      let result = await service.findsonglistRand();
      let newArr = [];
      result.slice(0, 10).map((item) => {
        newArr.push({
          playCnt: (item.list_play_count / 10000).toFixed(1) + "w",
          text: item.list_name,
          imgsrc: `${host + item.list_pic + item.list_pic_name}`,
        });
      });
      state.PlayListData = newArr;
    };

    const getCarouselData = async () => {
      let result = await service.findcarouselRand();
      let newArr = [];
      result.map((item) => {
        newArr.push({
          alt: "",
          imgsrc: `${host + item.carousel_file_src + item.carousel_file_name}`,
        });
      });
      state.CarData = newArr;
    };

    return {
      ...toRefs(state),
      tagsBox,
      UpdateIdx,
    };
  },
};
</script>

<style lang="scss">
#home {
  width: 100%;
  // 全局
  .thumb {
    position: relative;
  }
  .back-wrapper {
    width: 100%;
    background-color: #f2f2f2;
  }
  .section {
    margin-top: 65px;
    overflow: inherit;
    position: relative;
    width: 100%;
    min-width: 1000px;

    .wrapper-items {
      margin: 0 -21px;

      &::after {
        display: block;
        content: "";
        height: 0;
        visibility: hidden;
        clear: both;
      }
    }

    &::after {
      display: block;
      content: "";
      height: 0;
      visibility: hidden;
      clear: both;
    }

    .img-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #fff;
      display: block;
      border-radius: 8px;
      overflow: hidden;
      z-index: 1;

      img {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .h-top {
    position: relative;
    top: 28px;
    #carousel {
      overflow: hidden;
      &:hover {
        .c-button {
          opacity: 1;
        }
      }
      .car-item {
        overflow: hidden;
        border-radius: 8px;
      }
      .dir-next {
        a {
          border-radius: 50px 0 0 50px !important;
        }
      }
      .dir-prev {
        a {
          border-radius: 0 50px 50px 0;
        }
      }
      .c-button {
        opacity: 0;
        a {
          cursor: pointer;
          transition-duration: 0.5s;
          display: flex;

          &:hover {
            background-color: var(--background-color-hover);
          }
        }
      }
    }
  }
  .container {
    position: relative;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .data-tagsBox {
    margin: 50px auto 0;
    height: 80px;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;

    .tags-item {
      margin: 0 25px;
      display: block;

      img {
        width: 198px;
        height: 80px;
      }
    }
  }
  .item-info {
    p,
    a {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}
@media screen and (min-width: $MaxMinWidth) {
  #home {
    .carousel {
      height: 35rem;
      .container {
        height: 35rem;
      }
    }
    .play-list {
      height: 47rem;
    }
  }
}
@media screen and (max-width: $MiddleMaxWidth) and (min-width: $MiddleMinWidth) {
  #home {
    .carousel {
      height: 30rem;
      .container {
        height: 30rem;
      }
    }
    .play-list {
      height: 40rem;
    }
  }
}
@media screen and (max-width: $MinmaxWidth),
  (max-width: $MinmaxWidth2) and (min-width: $MinminWidth2) {
  #home {
    .carousel {
      height: 25rem;
      .container {
        height: 25rem;
      }
    }
    .play-list {
      height: 34rem;
    }
  }
}
</style>
